<template>
	<div>
	<el-drawer title="图标选择" :visible.sync="drawer" direction="rtl" :with-header="false" :show-close="true"
		:wrapperClosable="false" :destroy-on-close="true" class="drawer-main" size="1000px" :show="show" @close="click" append-to-body>
		<div class="close" @click="click">
			<i class="el-icon-close"></i>
		</div>
	
		<div class="drawer-title">
			选择文件
		</div>
		<!-- 分类展示 -->
		<div class="drawer-content">
			<div class="drawer-content-left">
				<el-scrollbar style="height:100%;">
					<div style="margin: 10px;">
						<el-tree :data="cateData" node-key="id" :props="defaultProps" :expand-on-click-node="false"
							ref="tree" show-checkbox @check-change="handleNodeClick" check-strictly
							check-on-click-node :default-checked-keys="dckey" :default-expand-all="true">
						</el-tree>
					</div>
				</el-scrollbar>
			</div>
			<div class="drawer-content-right">
				<!-- 这是头部 -->
				<div class="d-c-r-t">
	
					<el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 10px;">
						<el-form-item>
							<el-radio-group v-model="formInline.type" size="small" @change="RadioChange">
								<el-radio :label="1" border>图片</el-radio>
								<el-radio :label="3" border>视频</el-radio>
								<el-radio :label="2" border>文件</el-radio>
								<el-radio :label="4" border>其它</el-radio>
							</el-radio-group>
							<!-- <el-tag v-for="item in tagDate" :key="item.label" :type="item.type" :effect="item.plain"
								@click="clicktag(item)">
								{{ item.label }}
							</el-tag> -->
						</el-form-item>
						<el-form-item>
	
							<el-input v-model="formInline.keyWord" size="mini" placeholder="关键字查询"></el-input>
						</el-form-item>
	
						<el-form-item>
							<el-button type="primary" size="mini">查询</el-button>
						</el-form-item>
					</el-form>
					<div>
						<el-button type="success" size="mini" @click="uploadDrawer = true">上传图片</el-button>
					</div>
	
				</div>
				<!-- 头部结束 -->
				<!-- 中间内容开始 -->
				<div class="d-c-r-c" :style="{height : slbHeight } ">
					<el-scrollbar style="height: 100%;">
						<div style="margin-right: 10px;">
							<transition name="fade-transform" mode="out-in">
								<div class="d-c-r-l">
									<div class="d-c-r-i" v-for="(item,index) in filesDate" :key="index"
										v-if="filesDate.length>0">
	
										<el-image :src="item.http_url" fit="contain" v-if="item.type==1">
									</el-image>
										<el-image :src="require('@/assets/img/video.png')" fit="contain" v-if="item.type==3">
										</el-image>
										<el-image :src="require('@/assets/img/files.png')" fit="contain" v-if="item.type==2">
										</el-image>
										<div class="d-c-r-i-h">
											<i class="el-icon-zoom-in" @click="listshowpic(item)"></i>
											<i class="el-icon-delete-solid" @click="delRole(item)"></i>
											<i class="el-icon-check" @click="selectImg(item)"></i>
											<!-- <i class="el-icon-refresh-right"></i> -->
										</div>
										<div class="select-check" :class="[item.show? 'showflex' : 'hide']"><i
												class=" el-icon-check"></i></div>
									</div>
									<el-empty v-if="filesDate.length<=0"></el-empty>
								</div>
							</transition>
	
						</div>
					</el-scrollbar>
	
				</div>
				<!-- 中间内容结束 -->
				<!-- 底部分页开始 -->
				<div class="d-c-r-b">
					<el-pagination background @size-change="handleSizeChanges"
						@current-change="handleCurrentChanges" :current-page="pageNumber"
						:page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
						layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
					<!-- <el-pagination background layout="prev, pager, next" :total="1000">
					</el-pagination> -->
				</div>
				<!-- 底部分页结束 -->
			</div>
		</div>
		<div class="drawerfoot">
			<el-button size="mini" type="success" @click="opencate = true">添加分类</el-button>
			<el-button size="mini" type="danger" @click="uploadDrawer = true">上传图片</el-button>
			<el-button size="mini" type="primary" @click="sureSelect">确定选择</el-button>
			<el-button size="mini" type="info">取消</el-button>
			<el-button size="mini" type="warning">批量转移</el-button>
		</div>
	
	
		<el-drawer title="上传文件" :visible.sync="uploadDrawer" size="820px" :append-to-body="true" class="drawer-main"
			:with-header="false">
			<div class="close" @click="uploadDrawer = false">
				<i class="el-icon-close"></i>
			</div>
			<div class="drawer-title">
				上传文件
			</div>
			<div style="margin: 20px;">
				<div class="upload-button">
					<el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
				</div>
				<el-form ref="form" :model="form" label-width="80px" label-position="top">
					<el-row>
	
						<el-col :span="24">
							<el-form-item label="分类" prop="cateid">
								<div style="height: 30px; line-height: 30px;">
									<treeselect v-model="form.cateid" :options="parentDate" :normalizer="normalizer"
										:show-count="true" placeholder="选择分类" />
								</div>
	
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-upload class="upload-demo" ref="upload" :action="_self.actions" :on-preview="handlePreview"
					:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" multiple
					list-type="picture-card" :headers="uploadHeader" :data="form" :on-success="uploadsuccess">
					<i slot="default" class="el-icon-plus"></i>
					<!-- <div class="upload-button">
						<el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
					</div> -->
	
	
				</el-upload>
	
	
			</div>
		</el-drawer>
	
	
	</el-drawer>
	<el-dialog :visible.sync="dialogVisible" title="图片浏览" v-dialogDrag>
		<img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>
	
	
	<el-dialog v-dialogDrag :visible.sync="opencate" width="600px" append-to-body
		:title="!formcate.cate_id ? '新增' : '修改'">
		<el-form ref="form" :model="formcate" :rules="rulescate" label-width="100px">
			<el-row>
	
				<el-col :span="24">
					<el-form-item label="上级分类" prop="parent_id">
						<div style="height: 30px; line-height: 30px;">
							<treeselect v-model="formcate.parent_id" :options="cateAdd" :normalizer="normalizer"
								:show-count="true" placeholder="请选择上级分类" />
						</div>
	
					</el-form-item>
				</el-col>
	
				<el-col :span="24">
					<el-form-item label=" 分类名称" prop="cate_name">
						<el-input v-model="formcate.cate_name" placeholder="请输入分类名称" size="small" />
					</el-form-item>
				</el-col>
	
				<el-col :span="24">
					<el-form-item label="备注">
						<el-input v-model="formcate.remarks" size="mini" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排序" prop="order_by">
						<el-input v-model="formcate.order_by" placeholder="请输入排序" size="small" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="opencate = false" size="small">取 消</el-button>
			<el-button type="primary" @click="!formcate.cate_id ? submitForm('form') : subEditForm('form') "
				size="small">确 定</el-button>
		</div>
	
	</el-dialog>
	
	</div>
</template>

<script>
	let _self;
	let uploads = process.env.VUE_APP_API;
	import {
		getCateList,
		addCate,
		//editCate,
		//delCate,
		changeOrder,
		FilesListPage,
        delFiles
		
	} from '@/api/tool/files'
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import {
		getToken
	} from '@/common/token'
	// import {
	// 	FilesListPage,
	// 	delFiles,
	// 	batchRemove
	// } from '@/api/tool/files';
	export default {
		name: 'select-fiels',
		components: {
			Treeselect
		},
		data() {
			return {
				drawer: false,
				cateData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				radio3: 0,
				formInline: {
					type: this.filestype
				},
				clientHeight: '',
				slbHeight: '',
				uploadDrawer: false, //上传窗口
				dialogImageUrl: '',
				dialogVisible: false,
				parentDate: [],
				form: {
					cateid: undefined
				},
				actions: uploads + '/uploads/index',
				uploadHeader: {
					"Authorization": "Bearer " + getToken()
				},
				fileList: [],
				rules: [],
	
				dckey: [0],
				pageSize: 40, //一页显示多少条
				pageNumber: 1, //当前多少页
				keyWord: '',
				total: 0, //总页数
				filesDate: [], //文件数据
				opencate: false,
				formcate: {
	
					'cate_name': undefined,
					'parent_id': undefined,
					'remarks': undefined,
					'order_by': undefined,
					'icon': undefined,
	
				},
				rulescate: {
	
					cate_name: [{
						required: true,
						message: ' 分类名称.不能为空',
						trigger: 'blur'
					}],
					parent_id: [{
						required: true,
						message: '上级ID.不能为空',
						trigger: 'blur'
					}],
					order_by: [{
						required: true,
						message: '排序.不能为空',
						trigger: 'blur'
					}],
	
				},
				cateAdd: [], //添加分类数据
				selectDate: [], //选择中的
	
			};
		},
		props: {
			selectNum: {
				type: Number,
				default: 1
			},
			show: {
				type: Boolean,
				default: false
			},
			filestype: {
				type: Number,
				default: 1
			},
		},
		created() {
			_self = this;
			_self.init();
			_self.getFiles();
	
		},
		mounted() {
			this.clientHeight = `${document.documentElement.clientHeight}`; //获取浏览器可视区域高度
			let that = this;
			window.onresize = function() {
				this.clientHeight = `${document.documentElement.clientHeight}`;
				that.slbHeight = this.clientHeight - 211 + 'px';
			}
		},
		watch: {
			clientHeight() { //如果clientHeight 发生改变，这个函数就会运行
				this.changeFixed(this.clientHeight)
			},
			show() {
				this.drawer = this.show;
				
			}
		},
		methods: {
			changeFixed(clientHeight) {
				this.slbHeight = clientHeight - 211 + 'px';
			},
			click() {
				this.$emit('update', this.show)
				this.selectDate = [];
				//this.init();
				this.getFiles();
			},
			init() {
				
				getCateList().then((res) => {
	             
					const menu = {
						id: 0,
						name: '全部文件',
						children: []
					};
					menu.children = res.data.filesCateTree;
					_self.cateData.push(menu);
					const menus = {
						id: 0,
						name: '根分类',
						children: []
					}
					menus.children = res.data.filesCateTree;
					_self.cateAdd.push(menus);
					_self.parentDate = res.data.filesCateTree;
				})
	
	
	
			},
			getFiles() {
				let param = {
					"pageSize": _self.pageSize,
					"pageNumber": _self.pageNumber,
					"keyWord": _self.keyWord,
					"type": _self.formInline.type,
					"cateid": _self.dckey[0],
				}
				FilesListPage(param).then((res) => {
					//console.log(res);
					_self.filesDate = res.data.list;
					_self.total = res.data.total;
				})
			},
			normalizer: function(node) {
	
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.id,
					label: node.name,
					children: node.children
				};
			},
			// handlePictureCardPreview(file) {
			// 	this.dialogImageUrl = file.url;
			// 	this.dialogVisible = true;
			// },
			handleRemove(file) {
				console.log(file);
			},
			submitUpload() {
	
				if (_self.form.cateid == undefined || _self.form.cateid == null) {
					_self.msgError("请选择分类");
					return false;
				}
	
	
				this.$refs.upload.submit();
			},
			handlePreview(file) {
				console.log(file);
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			listshowpic(data) {
	
				this.dialogImageUrl = data.http_url;
				this.dialogVisible = true;
			},
			uploadsuccess(res) {
				console.log(res);
				if (res.code == 200) {
					_self.getFiles();
					this.$refs.upload.clearFiles();
					_self.msgSuccess(res.msg);
					_self.uploadDrawer = false;
				} else {
					_self.msgError(res.msg);
				}
			},
			// changecate(data, checked, node) {
			// 	console.log(data);
	
			// },
			handleNodeClick(data, checked, node) {
				if (checked === true) {
					this.checkedId = data.id;
					this.$refs.tree.setCheckedKeys([data.id]);
					_self.dckey = [data.id];
				} else {
					if (this.checkedId == data.id) {
						this.$refs.tree.setCheckedKeys([data.id]);
						_self.dckey = [data.id];
					}
				}
				_self.getFiles();
			},
			handleSizeChanges: function(e) {
				//console.log(e);
				_self.pageSize = e;
				_self.getFiles();
			},
			handleCurrentChanges: function(e) {
				console.log(e);
				_self.pageNumber = e;
				_self.getFiles();
			},
			delRole: function(data) {
				_self.$confirm('确定删除【' + data.title + '】此文件', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
	
					delFiles(data.fid).then((res) => {
						if (res.code == 200) {
							_self.msgSuccess(res.msg);
							_self.getFiles();
						} else {
							_self.msgError(res.msg);
						}
					})
	
	
				}).catch(() => {
					_self.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			RadioChange(e) {
				console.log(e);
				_self.fileType = e;
	
				_self.getFiles();
			},
			submitForm: function(data) {
				this.$refs[data].validate((valid) => {
					if (valid) {
						_self.addcate();
					} else {
						return false;
					}
				});
			},
			addcate: function() {
				console.log(_self.form);
				addCate(_self.formcate).then((res) => {
					console.log(res);
					if (res.code == 200) {
						_self.msgSuccess(res.msg)
						_self.cateData = [];
						_self.opencate = false;
	
						_self.init();
					} else {
						_self.msgError(res.msg);
					}
				})
			},
			selectImg: function(item) {
	              console.log(item);
				  let checkNum = _self.selectDate.length;
				  console.log(checkNum);
				  if(item.show == true){
					  console.log("执行这里1");
					  _self.$set(item,'show',false);
					  _self.selectDate.forEach((its)=>{
						  if(its.id == item.fid){
							  var index = _self.selectDate.indexOf(its);
							  if(index >-1){
								  _self.selectDate.splice(index,1);
							  }
						  }
					  })
				  }else{
					  console.log("执行这里2");
					  if(_self.selectNum == 1){
						  _self.filesDate.forEach((its)=>{
							  if(its.id != item.fid){
								  _self.$set(its,'show',false);
							  }
						  })
						  _self.selectDate = [];
						  _self.selectDate.push({
							  id: item.fid,
							  urls: item.http_url
						  });
						   _self.$set(item,'show',true);
					  }else{
						  if (checkNum < _self.selectNum) {
							  _self.$set(item, 'show', true);
							  _self.selectDate.push({
								  id: item.fid,
								  urls: item.http_url
							  });
						  }
					  }
					  
					  
					  
					 
				  }
				 console.log(_self.selectDate);
				  
				
			},
			sureSelect: function() {
			
				this.$emit('selectSure', this.selectDate);
			      this.click();
				this.selectDate = [];
				
			
			},
	
		}
	
	};
</script>

<style lang="scss">
	.drawer-main {
		.closes {
			width: 40px;
			height: 40px;
			position: absolute;
			left: -40px;
			top: 46%;
			background-color: #FFFFFF;
			cursor: pointer;
			padding: 5px 5px;
			border-bottom-left-radius: 20px;
			border-top-left-radius: 20px;
	
			i {
				font-size: 30px;
				color: #777;
			}
		}
	
		.drawer-title {
			height: 50px;
			background-color: #ecf5ff;
			border-color: #d9ecff;
			color: #409EFF;
			text-align: left;
			width: 100%;
			line-height: 50px;
			text-indent: 20px;
		}
	
		.drawer-content {
			width: 100%;
			height: calc(100% - 100px);
			display: flex;
			// background: #f7f7f7;
	
			.drawer-content-left {
				width: 200px;
				height: 100%;
				border-right: #f1f1f1 solid 1px;
				float: left;
	
				.el-tree {
					// background: #f7f7f7 !important;
					// border-radius: 5px;
				}
	
				.el-tree-node:focus>.el-tree-node__content {
					background-color: #ecf5ff;
					border-radius: 5px;
				}
			}
	
			.drawer-content-right {
	
				flex: 1;
				height: 100%;
	
				margin-top: 10px;
				margin-bottom: 10px;
				margin-left: 10px;
	
				.el-radio {
					margin-right: 5px;
				}
	
				.d-c-r-t {
					height: 50px;
					border-bottom: #f1f1f1 solid 1px;
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					.el-form-item {
						margin-bottom: 0;
					}
	
					margin-right: 10px;
				}
	
				.d-c-r-c {
					//height: calc(100% - 110px);
					height: -moz-calc(100% - 110px);
					height: -webkit-calc(100% - 110px);
					height: calc(100% - 110px);
					width: 100%;
	
	
					.d-c-r-l {
						display: flex;
						flex-wrap: wrap;
						
	
						.d-c-r-i {
							width: 130px;
							height: 130px;
							margin: 10px;
							border: #f7f7f7 solid 1px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #f1f1f1;
							position: relative;
	
							.el-image {
								width: calc(100% - 20px);
								height: calc(100% - 20px);
								margin: 10px;
	
							}
	
							.select-check {
								position: absolute;
								top: 0px;
								right: 0px;
								width: 0;
								height: 0;
								border-top: 30px solid #67C23A;
								border-left: 30px solid transparent;
	                            display: none;    
								i {
									position: absolute;
									top: -27px;
									right: 0px;
									color: #ffffff;
								}
							}
							.showflex {
								display: block !important;
								
							}
							.hide{
								display: none !important;
							}
	
							.d-c-r-i-h {
								background-color: rgba(0, 0, 0, 0.4);
								width: 100%;
								height: 100%;
								position: absolute;
								display: none;
								align-items: center;
								text-align: center;
								justify-content: space-between;
	
								i {
									font-size: 20px;
									color: #ffffff;
									margin: 10px;
	
								}
							}
	
						}
	
						.d-c-r-i:hover .d-c-r-i-h {
							display: flex !important;
						}
					}
				}
	
				.d-c-r-b {
					border-top: #f7f7f7 solid 1px;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 40px;
	
				}
			}
		}
	
		.drawerfoot {
			background: #f7f7f7;
			height: 50px;
			display: flex;
			align-items: center;
			padding-left: 10px;
		}
	
	
	}
	
	.upload-button {
		height: 50px;
		width: 100%;
		border-bottom: #f7f7f7 solid 1px;
	}
</style>
